<template>
    <ul class="blog-toc-container">
        <li v-for="item in list" :key="item.id">
            <a
                :href="'#' + item.anchor"
                :class="is_active(item)"
                @click="handle(item)"
            >
                {{ item.name }}
            </a>
            <BlogToc
                :list="item.children"
                :active_anchor="active_anchor"
                @select="handle"
                v-if="item.children"
            />
        </li>
    </ul>
</template>

<script>
export default {
    name: "BlogToc",
    props: {
        list: {
            type: Array,
            default: () => [] // 使用函数返回一个新的数组
        },
        active_anchor: {
            type: String,
            default: ""
        }
    },
    methods: {
        handle(item) {
            this.$emit("select", item)
        },
        is_active(item) {
            if (item.anchor === this.active_anchor) {
                return "active"
            }
        }
    }
}
</script>

<style lang="less">
@import "~@/styles/var.less";
.blog-toc-container {
    padding-left: 15px;
    box-sizing: border-box;
    font-size: 16px;
    li {
        min-height: 30px;
        line-height: 30px;
        a.active {
            color: @warn;
        }
    }
    .blog-toc-container {
        padding-left: 20px;
        font-size: 75%;
    }
}
</style>
